<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstrapTable/bootstrap-table.min.css">
</head>
<body>
<div class="container">
    <h1>学生管理</h1>
    <form id="form">
        <div class="form-group">
            <label for="searchOp">选择查询条件：</label>
            <select class="form-control" id="searchOp" name="op">
                <option value="id">学生id</option>
                <option value="name">学生姓名</option>
                <option value="no">学生学号</option>
            </select>
            <input type="text" class="form-control" id="InputName" placeholder="请输入查询内容">
            <button type="button" class="btn btn-success" onclick="searchStudent()">查询</button>
            <a href="students.html" class="btn btn-success">刷新重置</a>
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="changeFun()">新增学生信息</button>
        </div>
    </form>
    <table class="table table-striped" id="students"></table>
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h4 class="modal-title">学生信息</h4>
                </div>
                <div class="modal-body">
                    <form id="formStudent">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="no">学号:</label>
                            <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                        </div>
                        <div class="form-group">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                        </div>
                        <div class="form-group">
                            <label for="password">密码:</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <label for="sex">性别:</label>
                            <select class="form-control" id="sex" name="sex">
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="age">年龄:</label>
                            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                        </div>
                        <div class="form-group">
                            <label for="score">成绩:</label>
                            <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" id="saveButton" onclick="addStudent()">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrapTable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    // 初始化表单验证
    $(document).ready(function (){
        $("#formStudent").validate({
            debug: true,
            rules: {
                no: {
                    required: true,
                    minlength: 10,
                    maxlength: 10
                },
                name: {
                    required: true,
                    minlength: 2
                },
                age: {
                    required: true,
                    min: 16,
                    max: 30
                },
                score: {
                    required: true,
                    range: [0, 100]
                }
            },
            messages: {
                no: {
                    required: "请输入学生学号",
                    minlength: "学号必须是10位"
                },
                name: {
                    required: "请输入姓名",
                    minlength: "姓名至少2个字符"
                },
                age: {
                    required: "请输入年龄",
                    min: "年龄不能小于16岁",
                    max: "年龄不能大于30岁"
                },
                score: {
                    required: "请输入成绩",
                    range: "成绩必须在0到100之间"
                }
            }
        });
        $("#addButton").click(function() {
            $("#formStudent").validate().resetForm();
            $("#formStudent")[0].reset();
        });
    });

    function searchStudent() {
        var op = $("#searchOp").val();
        var content = $("#InputName").val();
        $("#students").bootstrapTable('refresh', {url: "/webapi/student/getby"+ op +"/"+ content});
    }

    function changeFun(){
        $("#saveButton").attr("onclick", "addStudent()");
    }

    function editStudent(id){
        $("#formStudent").validate().resetForm();
        $("#formStudent")[0].reset();
        $("#myModal").modal('show');
        $.ajax({
            url: "/webapi/student/get/" + id,
            type: "get"
        }).done(function (rs){
            $("#id").val(rs.id);
            $("#no").val(rs.no);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#score").val(rs.score);
        });
        $("#saveButton").attr("onclick", "updateStudent()");
    }

    function updateStudent(){
        var data = $("#formStudent").serialize();
        $.ajax({
            url: "/webapi/student/update/",
            method: "post",
            data: data
        }).done(function (){
            $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
            $('#myModal').modal('hide');
        });
    }

    function deleteStudent(id){
        if (confirm("是否真的要删除!")){
            $.ajax({
                url: "/webapi/student/delete/" + id,
                method: "delete"
            }).done(function (){
                $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
            });
        }
    }

    function addStudent(){
        var data = $("#formStudent").serialize();
        $.ajax({
            url: "/webapi/student/insert",
            method: "post",
            data: data
        }).done(function (){
            $("#students").bootstrapTable('refresh', {url: "/webapi/student/list"});
            $('#myModal').modal('hide');
        });
    }
</script>
</body>
</html>
